/*******Swiper******* */
var viewSwiper = new Swiper('.view .swiper-container', {
    on: {
        slideChangeTransitionStart: function () {
            updateNavPosition()
        }
    }
})

$('.view .arrow-left,.preview .arrow-left').on('click', function (e) {
    e.preventDefault()
    if (viewSwiper.activeIndex == 0) {
        viewSwiper.slideTo(viewSwiper.slides.length - 1, 1000);
        return
    }
    viewSwiper.slidePrev()
})
$('.view .arrow-right,.preview .arrow-right').on('click', function (e) {
    e.preventDefault()
    if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
        viewSwiper.slideTo(0, 1000);
        return
    }
    viewSwiper.slideNext()
})

var previewSwiper = new Swiper('.preview .swiper-container', {
    slidesPerView: 'auto',
    allowTouchMove: false,
    on: {
        tap: function () {
            viewSwiper.slideTo(previewSwiper.clickedIndex)
        }
    },
    // navigation: {
    //     nextEl: '.swiper-button-next',
    //     prevEl: '.swiper-button-prev',
    // },
})

function updateNavPosition() {
    $('.preview .active-nav').removeClass('active-nav')
    var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav')
    if (!activeNav.hasClass('swiper-slide-visible')) {
        if (activeNav.index() > previewSwiper.activeIndex) {
            var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1
            previewSwiper.slideTo(activeNav.index() - thumbsPerNav)
        } else {
            previewSwiper.slideTo(activeNav.index())
        }
    }
}



$(function () {
    var color = '亮黑色';
    var edition = '5G全网通 16GB+512GB';
    var package = '官方标配';

    $('.color-black,.edition span, .package span:first').addClass('redBorder')
    /*******选择颜色******* */
    $('.sel-color').on('click', '#color', function (e) {
        if (e.currentTarget == this) {
            $(this).addClass('redBorder')
                .siblings().removeClass('redBorder')
            color = $(this).text().trim()
        }
        $('.selected span').text(package + " / " + edition + " / " + color)
    })
    /*******选择套餐********/
    $('.package p:last').on('click', 'span', function (e) {
        if (e.currentTarget == this) {
            $(this).addClass('redBorder')
                .siblings().removeClass('redBorder')
            package = $(this).text()
            console.log(package, edition, color)
        }
        $('.selected span').text(package + " / " + edition + " / " + color)
    })
    /*******选择服务******* */
    $('.service-select').mouseenter(function () {
        $(this).children().children()
            .attr("src", "./image/index-img/上拉.png")
        $(this).next().slideDown(10)
    }).parent().mouseleave(function () {
        $('.sign').attr("src", "./image/index-img/下拉.png")
        $('.service-down').slideUp(10)
    })

    var mySwiper = new Swiper('.swiper', {
        loop: false, // 循环模式选项
        autoplay: {
            delay: 6000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.right',
            prevEl: '.left',
        },
    });

    $(window).scroll(function () {
        //获取元素距离浏览器顶部的距离
        var distanceTop_nav = $('.nav-middle').offset().top - $(window).scrollTop()
        var distanceTop_main = $('#main-two').offset().top - $(window).scrollTop()
        if (distanceTop_nav < 20) {
            $('.nav-middle').addClass('fixed')
            // $('[href="#section1"]').parent().addClass('active')
        }
        if (distanceTop_main > 200) {
            $('.nav-middle').removeClass('fixed')
        }
        //滚动监听
        function scrollMonitor(sleecter,dom){
            distance= $(sleecter).offset().top - $(window).scrollTop()
            if(distance<150){
                // return distance
                $(dom).parent().addClass('active')
                .siblings().removeClass('active')
            }
            
        }
        // var distanceTop_sect2 = $('#section2').offset().top - $(window).scrollTop()
        // if (distanceTop_sect2 < 50) {
        //     // console.log(distanceTop_sect2);
        //     $('[href="#section2"]').parent().addClass('active')
        //         .siblings().removeClass('active')
        // }
        scrollMonitor('#section1','[href="#section1"]')
        scrollMonitor('#section2','[href="#section2"]')
        scrollMonitor('#section3','[href="#section3"]')
        scrollMonitor('#section4','[href="#section4"]')
        // console.log(scrollMonitor('#section2','[href="#section2"]'))
    });



})
/*******放大镜效果******/

